<template>
  <div class="articles-container">
    <!-- 页面主体内容 -->
    <el-card>
      <!-- 搜索表单+新增btn -->
      <el-row>
        <!-- 搜索表单 -->
        <el-col :span="18">
          <el-form inline label-width="80px" ref="CLform">
            <el-form-item label="关键字" size="small">
              <el-input
                placeholder="根据文章标题搜索"
                v-model="getList.keyword"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" size="small">
              <el-select v-model="getList.state" placeholder="请选择">
                <!-- 直接遍历使用外部引入的状态 -->
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 表单按钮 -->
            <el-form-item size="small">
              <el-button size="small" @click="clickClear">清除</el-button>
              <el-button size="small" type="primary" @click="clickSearch"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 右侧按钮 -->
        <el-col :span="6" style="text-align: right">
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="(showHide = true), (title = '新增文章')"
            >新增技巧</el-button
          >
        </el-col>
      </el-row>
      <!-- alert消息提示 -->
      <el-alert
        :closable="false"
        :title="'数据一共 ' + articleList.counts + ' 条'"
        type="info"
        show-icon
      >
      </el-alert>
      <!-- table表格 -->
      <el-table :data="articleList.items" :header-cell-style="color">
        <el-table-column width="80" label="序号" type="index"></el-table-column>
        <el-table-column width="400" label="文章标题" prop="title">
          <template #default="{ row }">
            {{ row.title }}
            <a
              v-if="row.videoURL"
              href="javascript:;"
              class="el-icon-film"
              style="color: #0000ff; font-size: 18px"
              @click="clickVideo(row.videoURL)"
            ></a>
          </template>
        </el-table-column>
        <el-table-column label="阅读数" prop="visits"></el-table-column>
        <el-table-column label="录入人" prop="username"></el-table-column>
        <el-table-column label="录入时间" prop="createTime">
          <template #default="{ row }">
            <!-- 过滤器用法  前面变量  后面过滤器名称 -->
            <span>{{ row.createTime | dateformat }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          label="状态"
          prop="state"
          :formatter="zt"
        ></el-table-column>
        <el-table-column width="180" label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="clickLook(row)">预览</el-button>
            <el-button
              type="text"
              v-text="row.state === 0 ? '启用' : '禁用'"
              @click="clickState(row)"
            ></el-button>
            <el-button
              type="text"
              :disabled="row.state !== 0"
              @click="clickChange(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="row.state !== 0"
              @click="clickDel(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <PaginationCpt
        v-if="articleList.counts / getList.pagesize > 1"
        :counts="articleList.counts"
        :pagesize="getList.pagesize"
        @SizeChange="handleSizeChange"
        @CurrentChange="handleCurrentChange"
      ></PaginationCpt>
    </el-card>
    <!-- 页面弹框dialog -->
    <el-dialog
      :title="title"
      :visible.sync="showHide"
      width="800px"
      @close="handleClose"
    >
      <el-form
        v-if="title !== '预览文章'"
        label-width="100px"
        :model="form"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="文章标题：" size="small" prop="title">
          <el-input
            v-model="form.title"
            placeholder="请输入文章标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章内容：" size="small" prop="articleBody">
          <!-- 插件不是elui的 所以需要添加使用其他校验方法 但是校验规则还是用这里的-->
          <quillEditor
            v-model="form.articleBody"
            :options="editorOption"
            @blur="$refs.formRef.validateField('articleBody')"
          ></quillEditor>
        </el-form-item>
        <el-form-item label="视频地址：" size="small">
          <el-input
            v-model="form.videoURL"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- dialog内部按钮 -->
      <div v-if="title !== '预览文章'" slot="footer" style="text-align: center">
        <el-button @click="showHide = false">取消</el-button>
        <el-button type="primary" @click="clickConfirm">确认</el-button>
      </div>
      <!-- 预览弹框 -->
      <div class="look" v-if="title === '预览文章'">
        <div class="title">
          <h2>{{ look.title }}</h2>
          <div>
            <span>{{ look.createTime | dateformat }}</span>
            <span>{{ look.username }}</span
            ><span class="el-icon-view"></span> <span>{{ look.visits }}</span>
          </div>
        </div>
        <div class="content" v-html="look.articleBody"></div>
      </div>
    </el-dialog>
    <!-- 视频弹框遮罩==== -->
    <div class="video-preview" v-if="videoURL">
      <div class="close">
        <span class="el-icon-close" @click="videoURL = null"></span>
      </div>
      <div class="box">
        <video :src="videoURL"></video>
      </div>
    </div>
  </div>
</template>

<script>
// 引入富文本插件
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
// 引入组件
import PaginationCpt from "./qy_cpt/pagination_cpt.vue";
// 引入通用状态选择
import { status } from "@/api/hmmm/constants";
// 引入ajax请求
import { list, add, changeState, update, remove } from "@/api/hmmm/articles";
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  ["blockquote"], // 引用  代码块-----['blockquote', 'code-block']
  ["code-block", "image", "link"], // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
  components: {
    PaginationCpt,
    quillEditor,
  },
  data() {
    return {
      title: null, // dialog标题
      color: {
        // 表格表头样式
        "background-color": "#fafafa",
        "border-bottom": "2px solid #e8e8e8",
      },
      status, // 引入的数据存到data中就可以在模板中直接使用
      getList: {
        // 获取文章列表请求体
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null,
      },
      articleList: {}, // 文章列表返回数据
      showHide: false, // dialog显隐
      editorOption: {
        // 富文本插件测试
        // 占位符内容 空格
        placeholder: " ",
        modules: {
          toolbar: {
            // 引入富文本插件功能配置
            container: toolbarOptions,
          },
        },
      },
      form: {
        // dialog form表单数据  也是新增编辑请求体
        id: null, // 每行的ID 编辑需要用到?
        title: null, // 标题
        articleBody: null, // 文章正文
        videoURL: null, // 视频地址
      },
      rules: {
        // 表单校验规则
        title: [{ required: true, message: "请输入文章标题", trigger: "blur" }],
        articleBody: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
        ],
      },
      look: {},
      videoURL: null,
    };
  },
  methods: {
    // 封装渲染文章列表请求
    async getArticleList() {
      const res = await list(this.getList);
      this.articleList = res.data;
      // console.log(this.articleList)
    },
    // 渲染状态格式化内容  elui组件自带的
    zt(row) {
      const obj = status.find((item) => item.value === row.state);
      if (obj) {
        return "已" + obj.label;
      } else {
        return "未知";
      }
    },
    // 点击状态操作 发送修改状态请求
    async clickState(row) {
      const data = {
        id: row.id,
        state: row.state === 0 ? (row.state = 1) : (row.state = 0),
      };
      await changeState(data);
      await this.getArticleList();
      // 消息提示
      this.$message({
        message: "操作成功",
        type: "success",
      });
    },
    // 分页组件事件
    handleSizeChange(n) {
      this.getList.pagesize = n;
      this.getArticleList();
    },
    // 分页组件事件
    handleCurrentChange(m) {
      this.getList.page = m;
      this.getArticleList();
    },
    // 点击清除按钮 清空搜索输入框
    clickClear() {
      this.getList.keyword = null;
      this.getList.state = null;
    },
    // 点击搜索按钮 发送请求 准确渲染文章列表
    clickSearch() {
      this.getArticleList();
    },
    // dialog消失事件 清空校验警告 清空表单
    async handleClose() {
      if (this.title !== "预览文章") {
        await this.$refs.formRef.resetFields();
        this.form = {
          // dialog form表单数据  也是新增编辑请求体
          id: null, // 每行的ID 编辑需要用到?
          title: null, // 标题
          articleBody: null, // 文章正文
          videoURL: null, // 视频地址
        };
      }
    },
    // 点击dialog 确认按钮
    async clickConfirm() {
      try {
        this.$refs.formRef.validate(); // 再次验证表单
        console.log(this.form);
        // 判断新增还是修改
        if (this.title === "新增文章") {
          await add(this.form);
        } else {
          await update(this.form);
        }
        this.getArticleList();
        this.showHide = false;
      } catch (error) {
        console.log(error);
      }
    },
    // 点击修改按钮
    clickChange(row) {
      this.showHide = true;
      this.title = "修改文章";
      // console.log(row)
      this.form.id = row.id;
      this.form.title = row.title;
      this.form.articleBody = row.articleBody;
      this.form.videoURL = row.videoURL;
      // console.log(this.form)
    },
    // 点击删除按钮
    async clickDel(row) {
      // console.log(row)
      this.form.id = row.id;
      try {
        await this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        await remove(this.form);
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      } catch (error) {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      }
      this.getArticleList();
    },
    // 点击预览按钮
    clickLook(row) {
      this.title = "预览文章";
      this.look = row;
      this.showHide = true;
    },
    // 点击视频按钮
    clickVideo(url) {
      console.log(url);
      this.videoURL = url;
    },
  },
  created() {
    // 发送渲染文章列表请求
    this.getArticleList();
  },
};
</script>

<style scoped lang="scss">
// 整体盒子内边距
.articles-container {
  padding: 10px;
}
// alert提示框下边距
.el-alert {
  margin-bottom: 15px;
}
// 富文本插件内容高度
::v-deep .ql-editor {
  min-height: 200px;
}
::v-deep .ql-toolbar {
  padding: 0 8px;
  line-height: 32px;
  height: 34px;
}
// 预览文章样式
.look {
  .title {
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;
    h2 {
      margin: 0;
    }
    div {
      margin-top: 10px;
      span {
        margin-left: 10px;
      }
    }
  }
  .content {
    background: #f5f5f5;
    padding: 10px;
  }
}
// 视频弹框样式
.video-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
  .close {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .box {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
